/* ----------------------------------------------------------------------------

	pax.widget.button.js Copyright (C) 2006, 2008 Mikkel Bergmann, Pointful

	Licence
	-------
	
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

	See lgpl.txt for licence details

---------------------------------------------------------------------------- */

/*
	Script: pax.widget.button
		This is a button widget, that can render buttons, for use in other widgets
		
	Author:
		Mikkel Bergmann, <http://www.pointful.com>

*/

var pax = pax || {};
pax.widget = pax.widget || {};
pax.widget.button = pax.widget.button || {};

/*	Method: pax.widget.button.init
	Renders a button into the given target
	
	Parameters:		
		target - an element to render the button into
		args - arguments for the grid widget
		* id - Optional ID of our new button
		* width - Width of the button, eg: '70px'
		* height - Height of the button
		* content - Stuff in the button (if not specified, we use the contents of the target)
		* showChrome - Do we show a nice button chrome surround, or just the contents?
		* inline - Do we want the button to be displayed inline, or as table-layout?
		* func - Click function
		* baseClass - The default base class name, for applying style class on hover, and click, your class will need to be named baseClass + '_pButtonHover', and baseClass + '_pButtonClick'

	Returns:
		Button widget object


	Example:
		(start code)
			<span id='widget.button.init.example1'></span>
			[:.
				pax.widget.button.init( pax.$('widget.button.init.example1'), {
					id: 'myButton',
					content: 'Hello!',
					func: function(e){ alert('Hi!') }
				} );
			:]
		(end)


	Example:
		(start code)
			<span id='widget.button.init.example1.but1' style='float:left'></span>
			<span id='widget.button.init.example1.but2' style='float:left'></span>
			<span id='widget.button.init.example1.but3' style='float:left'></span>
			<span id='widget.button.init.example1.but4' style='float:left'></span>
			[:.
				pax.widget.button.init( pax.$('widget.button.init.example1.but1'), {
					func: function(e) { alert( 'you clicked button 1.' ); },
					content: '<img src="/pax/resource/img/arrow_left_full.gif">',
					width: '18px'
				} );
				pax.widget.button.init( pax.$('widget.button.init.example1.but2'), {
					func: function(e) { alert( 'you clicked button 2.' ); },
					content: '<img src="/pax/resource/img/arrow_left.gif">',
					width: '18px'
				} );
				pax.widget.button.init( pax.$('widget.button.init.example1.but3'), {
					func: function(e) { alert( 'you clicked button 3.' ); },
					content: '<img src="/pax/resource/img/arrow_right.gif">',
					width: '18px'
				} );
				pax.widget.button.init( pax.$('widget.button.init.example1.but4'), {
					func: function(e) { alert( 'you clicked button 4.' ); },
					content: '<img src="/pax/resource/img/arrow_right_full.gif">',
					width: '18px'
				} );
			:]
		(end)
		This example shows some built-in image buttons
		
	TODO: Make it autodetect 'button' and 'input type="button"', and render accordingly.
*/
pax.widget.button.init = function( target, args ) {

	var model = pax.widget.button.model( target, args );
	
	var myButton = pax.widget.init( {
		target: target,
		model: model, 
		template: pax.widget.button.template()
	} );

	myButton.render();

	myButton.bindClassNames( target, {
		'pButton-wrap': {
			mouseover: function(ele) { 
				pax.util.addClassName( this, ( model.baseClass )? model.baseClass + '_pButtonHover': 'pButtonHover' ); 
			},
			mouseout: function(ele)	{ 
				pax.util.removeClassName( this, ( model.baseClass )? model.baseClass + '_pButtonHover': 'pButtonHover' );
				pax.util.removeClassName( this, ( model.baseClass )? model.baseClass + '_pButtonClick': 'pButtonClick' );
			},
			mousedown: function(ele) {
				pax.util.addClassName( this, ( model.baseClass )? model.baseClass + '_pButtonClick': 'pButtonClick' ); 
			},
			mouseup: function(ele) {
				pax.util.removeClassName( this, ( model.baseClass )? model.baseClass + '_pButtonClick': 'pButtonClick' ); 
			},
			click: model.func
		}
	} );

	return myButton;
};



//	Setup the default config values for this widget
//	TODO: Rename 'func' to 'click'
pax.widget.button.model = function( target, args ) {
	return pax.defaultArgs( {
		id: '',						//	Optional ID of our new button
		width: '70px',				//	Width of the button
		height: '20px',				//	Height of the button
		content: target.innerHTML,	//	Stuff in the button
		showChrome: true,			//	Do we show a nice button chrome surround, or just the contents?
		inline: false,				//	Do we want the button to be displayed inline, or as browser default (usually table-layout)?
		baseClass: '',				//	The default base class name, for applying other than the default style
		buttonClass: '',			//	The CSS class name to apply to the button part of the button template
		func: false					//	Click function
	}, args );
};


//	Private method: pax.widget.button.template - Returns a PAX template for the button
//	Note: as we only have one tempate, 'name' is not really required here. If we had multiple templates, we would conditionally return a template, based on name.
pax.widget.button.template = function( name ) {

	var myTemplate = "" +
		"<table id='[:= id :]' class='[:= (showChrome)? '': 'pButtonNoChrome' :] [:= baseClass :] pButton-wrap pButton' cellspacing='0' cellpadding='0' "+
		"border='0' width='[:= width :]' height='[:= height :]' style='width:[:= width :]; height:[:= height :];[:= (inline)? 'display: inline': '' :]'>"+
		"	<tbody>" +
		"		<tr>"+
		"			[: if(showChrome) { :]"+
		"			<td class='pButton-left'><span></span></td>"+
		"			[: } :]"+
		"			<td class='pButton-center'>"+
		"				<em><button type='button' class='pButton-text[:= (pax.isIe)? ' paxisIe': '' :][:= (buttonClass != '')? ' ' + buttonClass: '' :]' style='width:[:= width :]; height:[:= height :]'>[:= content :]</button></em>"+
		"			</td>"+
		"			[: if(showChrome) { :]"+
		"			<td class='pButton-right'><span></span></td>"+
		"			[: } :]"+
		"		</tr>"+
		"	</tbody>" +
		"</table>"+
	"";
	
	return myTemplate;
};